<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div style="padding-left: 30px; margin: 10px 0px">
      <Header headerNav="退款" />
    </div>
    <!-- 订单筛选 -->
    <HeaderTop
      :show="false"
      title="退款订单筛选"
      time="提交时间"
      buttonTitle="筛选"
      @submitBut="getChild"
      name="姓名"
      :flag="true"
      :timeShow="true"
      @chooseTime="getTime"
    />
    <!-- 中间Content -->
    <div class="content">
      <div>
        <h3>退款订单列表</h3>
      </div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%; height: 350px; overflow: auto"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="orderNumber"
          label="订单编号"
          width="180"
          text-aligin="center"
        >
        </el-table-column>
        <el-table-column prop="userName" label="用户昵称" width="180">
        </el-table-column>
        <el-table-column prop="userTel" label="手机号"></el-table-column>
        <el-table-column prop="className" label="课程名称"> </el-table-column>
        <el-table-column prop="orderPrice" label="订单金额"> </el-table-column>
        <el-table-column prop="orderFlag" label="订单状态"> </el-table-column>
        <el-table-column prop="submitTime" label="处理时间"> </el-table-column>
        <el-table-column prop="查看" label="操作">
          <template slot-scope="scope">
            <el-button type="text" style="color: green" @click="see(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <Paging
        v-if="curd.length > 0"
        :tableData="tableData.length"
        :pagesize="pagesize"
        :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange"
        :currentPage="currentPage"
      />
      <!-- 弹框 -->
      <transition name="alertDong">
        <Alert
          class="alertBox"
          v-if="isShowAlert"
          order="订单详情"
          orderNumber="订单编号"
          userNames="用户昵称"
          classs="班级名称"
          price="订单金额"
          state="订单状态"
          time="提交时间"
          :orderBian="this.dataItem.orderNumber"
          :userName="this.dataItem.userName"
          :className="this.dataItem.className"
          :orderPrice="this.dataItem.orderPrice"
          :orderState="this.dataItem.orderFlag"
          :subTime="this.dataItem.submitTime"
          @isShowAlert="isShowAlertChild"
      /></transition>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import Header from "../../../../components/header/index.vue";
import HeaderTop from "../../../../components/headerTop/index.vue";
import Alert from "../../../../components/alert/index.vue";
import Paging from "../../../../components/paging/index.vue";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      currentPage: 1, //展示第几页
      pagesize: 5, //一页显示几条数据
      searchData: "", //搜索内容,
      curd: [], //搜索的数据,
      isShowAlert: false,
      dataItem: [],
    };
  },
  components: { Header, HeaderTop, Alert, Paging },
  // 生命周期 - 创建完成（访问当前this实例）
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    console.log(this.totalData);
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    // 获取mysql订单管理数据
    let res = await this.$axios.get("/api/users");
    this.tableData = res.data;
    this.curd = res.data;
  },
  // Vue方法定义
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
    },
    // 获取子级传过来的值
    getChild(val) {
      console.log(val);
      // 搜索筛选数据
      if (val.subTime) {
        let [startTime, endTime] = val.subTime;
        this.tableData = this.curd.filter((item) => {
          let rowTime = new Date(item.submitTime);
          return (
            item.userName.includes(val.search)  &&
            rowTime >= startTime &&
            rowTime < endTime
          );
        });
      }
      this.tableData = this.curd.filter((item) => {
        return item.userName.includes(val.search);
      });
    },
    // 获取时间
    getTime(val) {
      if (val) {
        let [startTime, endTime] = val;
        this.tableData = this.curd.filter((item) => {
          let rowTime = new Date(item.submitTime);
          return rowTime >= startTime && rowTime < endTime;
        });
      }
    },
    // 查看 打开弹框
    async see(row) {
      console.log(row);
      let id = row.orderNumber;
      this.isShowAlert = true;
      let dataItem = await this.$axios
        .post("/api/users/see", { id })
        .then((res) => {
          return res.data;
        });
      this.dataItem = dataItem;
      console.log(this.dataItem);
    },
    isShowAlertChild(val) {
      console.log(val);
      this.isShowAlert = val;
    },
  },
};
</script>

<style lang="less" scoped>
/* @import url(''); 引入css类 */
.content {
  width: 95%;
  margin: 15px auto;
  background: #fff;
  border-radius: 5px;
  position: relative;
  > div:nth-child(1) {
    padding: 15px 0px;
    border-bottom: 1px solid #ccc;
  }
}
.alertBox {
  transition: all 0.5s ease;
  width: 500px;
  height: 450px;
  background: #f1f1f1;
  border-radius: 10px;
  position: absolute;
  top: calc(50% - 250px);
  left: calc(50% - 225px);
  z-index: 999;
  padding: 0px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow-y: auto;
}
.alertDong-enter {
  // transform:translateY(100%);
  opacity: 0.5;
}
.alertDong-enter-to {
  // transform: translateY((100%));
  opacity: 1;
}
.alertDong-leave-to {
  opacity: 0.5;
}
</style>